<template>
  <el-container>
    <vHeadSpace />
    <el-container>
      <vAsideSpace />
      <el-main class="logDetail_main">
        <div  class="logDetail_content">
          <div class="block">
            <el-button type="primary" icon="el-icon-arrow-left" style="margin-right: 15px" @click="prev()" size="small">上一页</el-button>
            <span class="demonstration">请选择您想查询的时间段</span>
            <el-date-picker

                    v-model="timeLimit"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="timeChange"
                    value-format="yyyy-MM-dd"
                    style="margin-left: 10px; margin-right: 10px"
                    size="small">
            </el-date-picker>
            <el-select v-model="logTypeValue" placeholder="请选择" size="small" >
              <el-option
                      v-for="item in logTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary"  style="margin-left: 15px" @click="getDataInTimeLimit()" round size="small">查询</el-button>
            <el-button type="primary"  style="margin-left: 15px" @click="createLog()" round size="small">添加日志</el-button>
          </div>
          <div style="margin-top: 20px">
            <el-table
                    v-loading="isLoading"
                    :data="all_logs_detail"
                    style="width: 100%">
              <el-table-column
                      prop="clock"
                      label="具体时间"
                      width="180">
              </el-table-column>
              <el-table-column
                      prop="value"
                      label="日志内容">
              </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next, jumper"
                    :total="totalNum"
                    @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </el-main>
      <vFootSpace/>
    </el-container>
  </el-container>
</template>

<script>
  import axios from "axios";

  export default {
    name: "LogDetails",
    created() {
      this.fetchData();
      this.loadTime();
      this.hostId = this.$route.query.hostId;
      this.hostname = this.$route.query.hostname;
      // this.Ip = this.$route.query.Ip;
      // this.getDataInTimeLimit();
      this.getInitType();
    },
    data() {
      return {
        nowTime: '',
        isLoading: false,
        all_logs: 0,
        all_logs_detail: [],
        currentPage: 1,
        a_pageSize: '',
        totalNum: 0,
        value1: '',
        timeChange: {
          disabledDate(time){
            return time.getTime() < (Date.now() - 3600 * 1000 * 24 * 183) ||time.getTime() > Date.now() //选择时间范围
        }
      },
        timeLimit: '',
        hostId: 0,
        logTypes: [],
        logTypeValue: "",
      }
    },
    methods:{
      fetchData() {
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let time = y + '-' + m + '-' + d;
        this.nowTime = time;
        this.timeLimit = [];
        this.timeLimit.length = 2;
        for (let i = 0; i < this.timeLimit.length; i++) {
          this.timeLimit[i] = time;
        }
      },
      prev() {
        this.$router.go(-1);
      },
      /**
       * 更改每页显示页数
       * @param val
       */
      handleSizeChange(val) {
        this.a_pageSize = val;
        this.getDataInTimeLimit();
      },

      /**
       * 点击上一页下一页的时候重新发请求获取当前页数据
       * @param val
       */
      handleCurrentChange(val) {
        this.currentPage = val;
        this.isLoading = true;
        this.getDataInTimeLimit();
      },
      createLog(){
        this.$router.push({
          path: 'itemInfo',
          query:{
            'hostid':this.hostId,
            'host':this.hostname,
            'flag':true,
            'cur_type': '1'
          }
        })
      },
      getDataInTimeLimit()
      {
        if (this.logTypeValue == ''){
          this.$message.error("请选择日志类型!")
        }else{
          let startDate = ''
          let endDate = ''
          if (this.timeLimit != null){
            startDate = this.timeLimit[0];
            endDate = this.timeLimit[1];
          }
          this.isLoading = true;
          axios.post('/monitor/get_log.action', {
            startDate: startDate,
            endDate: endDate,
            itemId: this.logTypeValue,
            currentPage: this.currentPage
          }).then( response =>{
            if (response.data.content.result === '暂无数据'){
              this.$message({
                showClose: true,
                message: '该时间范围内或该主机无数据',
                type: 'warning'
              });
              this.all_logs_detail = [];
            }else if(response.data.content.result === '暂时无法查询数据') {
              this.$message({
                showClose: true,
                message: '该日志监控项暂时无法获取数据',
                type: 'warning'
              });
              this.all_logs_detail = [];
            }
            else if (response.data.content.result === '暂未配置日志监控项'){
              this.$message({
                showClose: true,
                message: '该主机暂未配置日志监控项',
                type: 'warning'
              });
              this.all_logs_detail = [];
            }
            else {
              this.all_logs_detail = response.data.content.result;
              this.totalNum = response.data.content.total;
            }
            this.isLoading = false;
          })
        }
      },
      getInitType(){
        axios.post('/monitor/get_log_type.action', {
          hostId: this.hostId
        }).then((res) => {
          if (res.data.status == true){
            this.logTypes = res.data.content.result
          }else{
            this.$message.warning("该设备暂未配置日志监控项!")
          }
        })
      },

// 时间控件显示时间
      loadTime()
      {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth();
        let day = date.getDate();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        this.time = [new Date(year, month, day, 0, 0, 0), new Date(year, month, day, hours, minutes, seconds)];
        this.auditTime = this.time;
        this.applicationTime = this.time;
      }
  }
  }
</script>

<style scoped>
  .logDetail_main {
    padding: 10px;
    height: 92vh;
    width: 100%;
    margin-top: 60px;
  }
  .logDetail_content {
    margin-top: 0;
    width: 100%;
    height: 97%;
    overflow-y: auto;
  }
</style>
